<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${survey.title}回收数据详情</title>
    <link rel="stylesheet" href="../../static/lib/layui-src/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/question.css" media="all">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script src="../../static/lib/layui-src/layui.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
    let allOpt1 = ${allOpt};
    var temp={};
    var no ;
    let data=[];
</script>
<div class="layuimini-container bg" style="position: absolute;bottom: 0px;top:0px;left: 0px;right:0px;margin: 0px;">
    <div class="preview" id="preview" style="overflow: auto;">
        <ul class="content">
            <c:forEach items="${survey.questions}" var="question" varStatus="status">
                <c:if test="${question.type == 1  or question.type == 2 }">
                    <div class="radioTemplate spliter">
                        <li class="using radio">
                            <input type="hidden">
                            <div class="title">
                                <div class="no_edit"><strong>${status.index+1}、${question.title}</strong>
                                    <c:if test="${question.type == 1}">(单选)</c:if>
                                    <c:if test="${question.type == 2}">(多选)</c:if>
                                    <c:if test="${question.required==1}"><i class="layui-icon layui-icon-rate-solid" style="font-size: 10px; color: #FF0000;"></i>  </c:if>
                                </div>
                                <c:if test="${question.remark != null && question.remark != ''}">
                                    <div class="no_edit">${question.remark}</div>
                                </c:if>
                            </div>
                            <div >
                                <ul>
                                    <c:forEach items="${question.options}" var="option">
                                        <li>
                                           <table>
                                               <tr>

                                                   <td width="900px">
                                                           ${option.opt}
                                                       <div class="layui-progress layui-progress-big" lay-showPercent="true">
                                                           <div class="layui-progress-bar layui-bg-blue" lay-percent="${option.num}/${total}"></div>
                                                       </div>
                                                   </td>
                                               </tr>
                                           </table>
                                        </li>
                                        <script></script>
                                    </c:forEach>
                                </ul>
                            </div>
                        </li>
                        <div id="main${status.index}" style="height:300px"></div>
                    </div>
                    <script type="text/javascript">
                        no = ${status.index};
                        data=allOpt1[no].options;
                        var remark${status.index}=allOpt1[no];
                        //console.log(remark);
                        let opt${status.index}=[];
                        var opt_name${status.index}=[];
                       for (let i = 0; i < data.length ; i++) {
                               temp={};
                               opt${status.index}.push(data[i].opt);
                               temp["value"]=data[i].num;
                               temp["name"]=data[i].opt;
                               //console.log(temp)
                               opt_name${status.index}.push(temp);
                       }
                       //console.log(opt_name);

                        require.config({
                            paths: {
                                echarts: 'http://echarts.baidu.com/build/dist'
                            }
                        });

                        // 使用
                        require(
                            [
                                'echarts',
                                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
                            ],
                            function (ec) {
                                // 基于准备好的dom，初始化echarts图表
                                var myChart = ec.init(document.getElementById('main${status.index}'));

                                var option = {
                                    title : {
                                        text: remark${status.index}.title,
                                        subtext: remark${status.index}.remark,
                                        x:'center'
                                    },
                                    tooltip : {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        orient : 'vertical',
                                        x : 'left',
                                        data:opt${status.index}
                                    },
                                    toolbox: {
                                        show : true,
                                        feature : {
                                            mark : {show: true},
                                            dataView : {show: true, readOnly: false},
                                            magicType : {
                                                show: true,
                                                type: ['pie', 'funnel'],
                                                option: {
                                                    funnel: {
                                                        x: '25%',
                                                        width: '50%',
                                                        funnelAlign: 'left',
                                                        max: 1548
                                                    }
                                                }
                                            },
                                            restore : {show: true},
                                            saveAsImage : {show: true}
                                        }
                                    },
                                    calculable : true,
                                    series : [
                                        {
                                            name:'选项',
                                            type:'pie',
                                            radius : '55%',
                                            center: ['50%', '60%'],
                                            data:opt_name${status.index}
                                        }
                                    ]
                                };
                                // 为echarts对象加载数据
                                myChart.setOption(option);
                            }
                        );
                    </script>
                </c:if>
                <c:if test="${question.type == 3  or question.type == 4 }">
                    <div class="inputTemplate spliter">
                        <li class="using inputx">
                            <input type="hidden">
                            <div class="title">
                                <div class="no_edit"><strong>${status.index+1}、${question.title}</strong>
                                    <c:if test="${question.required==1}"><i class="layui-icon layui-icon-rate-solid" style="font-size: 10px; color: #FF0000;"></i>  </c:if>
                                </div>
                                <c:if test="${question.remark != null && question.remark != ''}">
                                    <div class="no_edit">${question.remark}</div>
                                </c:if>
                            </div>
                            <div>
                                <table id="demo${status.index+1}" lay-filter="test"></table>
                                <script>
                                    layui.use('table', function(){
                                        var table = layui.table;
                                        var ss=${survey.id};
                                        //第一个实例
                                        table.render({
                                            elem: '#demo${status.index+1}'
                                            ,height: 200
                                            ,url: "/survey/answerTxt?s_id="+ss+"&q_id="+${question.id} //数据接口
                                            ,page: false //开启分页
                                            ,contentType: 'application/json'
                                            ,method:"post"
                                            ,dataType:"JSON"
                                            ,cols: [[ //表头
                                                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                                                ,{field: 'result', title: '结果', width:400}
                                            ]]
                                        });

                                    });
                                </script>
                            </div>
                        </li>
                    </div>
                </c:if>
            </c:forEach>
        </ul>
    </div>
</div>


<script src="../../static/js/lay-config.js" charset="utf-8"></script>
<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use(['element','flow'], function(){
        var element = layui.element;
        var flow = layui.flow;
    });
</script>
</body>
</html>